<template>
	<view class="head">
		<view class="pic">
			<image :src="data.head_image" mode=""></image>
		</view>
		<view class="date">
			<view>{{data.date_info.date}}</view>
			<view>{{data.date_info.lunar_calendar}}</view>
			<view>{{data.date_info.type_des}}</view>
		</view>
		<view class="weiyu">今日一言：{{data.weiyu}}</view>
          <view class="list">
			  <view class="item" v-for="item,index in data.news">{{item}}</view>
		  </view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	onLoad(() => {
		readWorld()
	})
	const data=ref({})
	async function readWorld() {
		let res = await uni.$get("https://api.qqsuu.cn/api/dm-60s", {
			apiKey: '44a3eb055b7f8c113383b30fe296c818',	 
			type: 'json'
		})
		console.log(res)
		data.value=res.data.data
	}
</script>

<style lang="scss">
  .head{
	  .pic{
		  image{
			  width: 100%;
			  height: 240px;
		  }
	  }
	  .date{
		  display: flex;
		  justify-content: space-between;
		  margin: 10px;
	  }
	  .weiyu {
		  border:1px solid red;
		  padding: 10px;
	  }
	  .list{
		  margin: 10px;
		  .item{
		      margin-top: 5px;	  
			  border-bottom: 1px solid #eee;
		  }
		  
	  }
  }
</style>